<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>


		<!-- 1. Add these JavaScript inclusions in the head of your page -->
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<%= javascript_include_tag "highcharts" %>
		<!--[if IE]>
			<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
		<![endif]-->
<%= params[:filter]  %>
<%= "This is document" %> <%=  params[:docid]  %><br/>
<% @docid = params[:docid] %>
<% if @annotations.nil? %>
  <%= "There are no data in records" %>
<%else%>

  <% @annotation_male = Annotation.find(:all, :select => "DISTINCT user_id", :joins => :user, :conditions => {:document_id => params[:docid], :users => {:gender => "Male"}}) %>
  <% @annotation_female = Annotation.find(:all, :select => "DISTINCT user_id", :joins => :user, :conditions => {:document_id => params[:docid], :users => {:gender => "Female"}}) %>

  <!--User.count(:all, :select => 'DISTINCT id', :conditions => {:id => @annoid, :gender => "Male"})-->
        <!-- Populate gender count -->
      <%= "Number of Annotations: " %>
      <%= @annotations.size %>
      <%= "Female Annotations:" %>
      <%= @femaleannotations.size %>
      <%= "Male Annotations" %>
      <%= @maleannotations.size  %>
      

 <% end %>
      <!-- Get type of filter -->
      <%
      @filtertype = params[:filtertype]
      if ( @filtertype == "Gender")
        @filtercat = "'Male','Female'"
      elsif (@filtertype == "Orientation")
        @filtercat = "'Straight', 'Gay', 'Lesbian', 'Bisexual', 'Transexual',
      'Other', 'Prefer Not to Say'"
      elsif (@filtertype == "Race")
        @filtercat = "'Caucasian', 'African-American', 'Hispanic/Latin American',
      'Asian', 'South-Asian', 'Indegenous', 'Other', 'Prefer Not to Say'"
      elsif (@filtertype == "Religion")
        @filtercat = "'Atheist', 'Agnostic',
      'Christianity', 'Judaism', 'Hinduism', 'Buddhism', 'Islam', 'None','Other'"
      elsif (@filtertype == "Education")
        @filtercat = "'Elementary/Middle School', 'High School',
      'Bachelors', 'Masters', 'Doctorate', 'None', 'Other', 'Prefer Not to Say'"
      elsif (@filtertype == "Political")
        @filtercat = "'Liberal', 'Moderate', 'Conservative', 'Libertarian', 'Other',
    'Prefer Not to Say'"
      elsif (@filtertype == "Occupation")
        @filtercat = "'Service', 'Legal', 'Student',
    'Computer/IT', 'Engineering', 'Health Care', 'Writing', 'Social Work', 'Entertainment', 'Other', 'Unemployed',
  'Prefer Not to Say'"
      end
      %>

		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		$(document).ready(function() {
			var chart = new Highcharts.Chart({
				chart: {
					renderTo: 'container',
					defaultSeriesType: 'bar'
				},
				title: {
					text: 'Bar Chart by <%= params[:filtertype] %>'
				},
				subtitle: {
					text: '<%= "Document Name"  %> '
				},
				xAxis: {
                                        categories: [<%= @filtercat %>],
                                        //categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
					title: {
						text: ''
                                   
					}
				},
				yAxis: {
					min: 0,
					title: {
						text: 'Population',
						align: 'high'
					}
				},
				tooltip: {
					formatter: function() {
						return '<b>'+ this.x +'</b><br/>'+
							 this.series.name +': '+ this.y +' ';
					}
				},
				plotOptions: {
					bar: {
						dataLabels: {
							enabled: true,
							color: 'auto'
						}
					}
				},
				legend: {
					layout: 'vertical',
					style: {
						left: 'auto',
						bottom: 'auto',
						right: '80px',
						top: '50px'
					},
					borderWidth: 1,
					backgroundColor: '#FFFFFF'
				},
				credits: {
					enabled: false
				},

                                series: [{
                                        name: 'No. of People that Commented',
                                        data: [
                                              <% if params[:filtertype] == "Gender" %>
                                                <%=@maleannotations.size%>, <%=@femaleannotations.size%>
                                              <% elsif params[:filtertype] == "Orientation" %>
                                                <% @orientation_arr.each do |x| %>
                                                  <%= x %>,
                                                <% end %>
                                              <% elsif params[:filtertype] == "Education" %>
                                                <% @education_arr.each do |x| %>
                                                  <%= x %>,
                                                <% end %>
                                              <% elsif params[:filtertype] == "Race" %>
                                                <% @race_arr.each do |x| %>
                                                  <%= x %>,
                                                <% end %>
                                              <% elsif params[:filtertype] == "Religion" %>
                                                <% @religion_arr.each do |x| %>
                                                  <%= x %>,
                                                <% end %>
                                              <% elsif params[:filtertype] == "Political" %>
                                                <% @political_arr.each do |x| %>
                                                  <%= x %>,
                                                <% end %>
                                              <% elsif params[:filtertype] == "Occupation" %>
                                                <% @occupation_arr.each do |x| %>
                                                  <%= x %>,
                                                <% end %>
                                              <% else %>
                                                
                                              <% end %>
                                              ]

				}]
			});


		});
		</script>

	</head>
	<body>
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
                <%= render :partial => 'charts/chartfilterform' %>
		<!-- 3. Add the container -->


	</body>
</html>
